import styled from "@emotion/styled";
import { boxBg, BoxShadow, fontColor } from "components/style";
import { Button, Divider, List, Typography } from "antd";
import { CustomTag, Icon } from "components/lib";
import { windowSize } from "util/window";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { selectAllContentTag } from "screens/edit/edit.slice";
import { getBlogInfo, getTopCotent, mainActions } from "./main.slice";
import { Link } from "react-router-dom";
/**
 * 主要内容区域内的右侧标签栏
 *
 */
export const TipBoxScreen = () => {
  const dispatch = useDispatch();
  const [data, setData] = useState([
    { name: "文章数量", count: 0, icon: "icon-book" },
    { name: "运行天数", count: 0, icon: "icon-rocket" },
    { name: "浏览次数", count: 0, icon: "icon-eye" },
  ]);

  const topContent = useSelector(getTopCotent);

  const { liveDays, browseCount, contentNum } = useSelector(getBlogInfo);

  useEffect(() => {
    setData([
      { name: "文章数量", count: contentNum, icon: "icon-book" },
      { name: "运行天数", count: liveDays, icon: "icon-rocket" },
      { name: "浏览次数", count: browseCount, icon: "icon-eye" },
    ]);
  }, [contentNum, liveDays, browseCount]);

  const [list, setList] = useState([] as string[]);

  const tags = useSelector(selectAllContentTag);

  useEffect(() => {
    setList(tags);
  }, [tags]);

  return (
    <Container>
      <List
        itemLayout="horizontal"
        dataSource={data}
        split={false}
        renderItem={(item, index) => (
          <ListItem key={index}>
            <span>
              <Icon name={item.icon} />
              {item.name}
            </span>
            <CustomTag>{item.count}</CustomTag>
          </ListItem>
        )}
      />

      <Divider />
      <List
        itemLayout="horizontal"
        dataSource={topContent}
        split={false}
        renderItem={(item, index) => (
          <Link to={`${item.id}`} key={index}>
            <RankItem key={index}>
              <span
                style={{
                  color:
                    index === 0
                      ? "#ffbe52"
                      : index === 1
                      ? "#d1d1d1"
                      : index === 2
                      ? "#ff7752"
                      : "#bcbcbc",
                }}
              >
                <Icon name={`icon-top1`} />
              </span>

              <Typography.Text ellipsis={true}>{item.title}</Typography.Text>
            </RankItem>
          </Link>
        )}
      />
      <Divider />
      <div>
        <Link
          to={"/content"}
          onClick={() => dispatch(mainActions.onSetTag(""))}
        >
          <CustomTag>{"全部"}</CustomTag>
        </Link>
        {list.map((item, index) => {
          return (
            <Link
              key={index}
              to={"/content"}
              onClick={() => dispatch(mainActions.onSetTag(item))}
            >
              <CustomTag>{item}</CustomTag>
            </Link>
          );
        })}
      </div>
      <Divider />
      <NavFooter>
        <Button type={"link"}>
          <Link to={"/edit"}>
            <Icon name={"icon-shezhi"} />
          </Link>
        </Button>
      </NavFooter>
    </Container>
  );
};
const NavFooter = styled.div`
  background-color: #fff;
  height: 5rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
`;
const RankItem = styled(List.Item)`
  display: flex;
  justify-content: flex-start;
  color: ${fontColor};
  padding: 1.2rem 2rem;
  font-size: 1.4rem;
  background-color: ${boxBg};
`;

const ListItem = styled(List.Item)`
  display: flex;
  justify-content: space-between;
  color: ${fontColor};
  padding: 1.2rem 2rem;
  font-size: 1.4rem;
  background-color: ${boxBg};
`;

const Container = styled.div`
  ${BoxShadow}
  margin-top:2rem;
  padding: 2rem;
  margin: 2rem;
  width: 100%;
  @media screen and (min-width: ${windowSize.medium}px) {
    width: 24rem;
    min-width: 24rem;
    margin: 0rem;
  }
`;
